<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="container">
        <div>
            <button style="float: right; margin-top: 50px" @click="add">添加用户</button>
        </div>
        <table class="table table-striped table-hover">
            <tr>
                <th>id</th>
                <th>昵称</th>
                <th>密码</th>
                <th>用户权限</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <th>{{user.id}}</th>
                <th>{{user.userName}}</th>
                <th>{{user.userPassword}}</th>
                <th>{{user.userStatus}}</th>
                <th>
                    <button type="button" @click="update(user.id)">修改</button>
                    <button type="button" @click="clear(user.id)">删除</button>
                </th>
            </tr>
        </table>
    </div>
</div>
</body>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            users:{},
        },
        methods:{
            getAllUser(){
                axios.get("http://localhost:9090/user/getAll").then((res)=>{
                    console.log(res.data)
                    this.users = res.data;
                })
            },
            clear(id){
                axios.get("http://localhost:9090/user/delete?id="+id).then((res)=>{
                    alert("删除成功")
                })
            },
            update(id){
                location.href="./update.html?id="+id;
            },
            add(){
                location.href="./add.html"
            }
        },
        created(){
            this.getAllUser();
        }
    })
</script>
</html>